<template>
  <div style="margin: 10px 0">
    <el-table :data="state.tableData" stripe size="medium"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
      <el-table-column prop="goodName" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="商品单价"></el-table-column>
      <el-table-column prop="num" label="商品数量"></el-table-column>
      <el-table-column prop="img" label="图片">
        <template v-slot="scope">
          <el-image :src="scope.row.img" style="width: 100px; height: 100px"></el-image>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="userid" label="用户id"></el-table-column>-->

      <el-table-column label="操作"  width="180" align="center">
        <template #default="scope">
          <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button link type="danger" @click="handleDelete"><el-icon><Delete /></el-icon>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 20px; background-color: white; margin: 10px 0; text-align: right; border-radius: 10px">
      <div style="color: red;"> 总价 ￥{{ state.totalPrice }}</div>
      <div style="margin: 10px 0">
        <el-button style="background-color: red; color: white; font-size: 18px; padding: 10px 20px" @click="adaOrder">下单</el-button>
      </div>
    </div>

<!--    <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">-->
<!--      <el-form label-width="140px" size="small" style="width: 85%;" :model="form" :rules="rules" ref="ruleForm">-->
<!--        <el-form-item prop="goodsId" label="商品id">-->
<!--          <el-input v-model="state.form.goodsId" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="num" label="商品数量">-->
<!--          <el-input v-model="state.form.num" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="userid" label="用户id">-->
<!--          <el-input v-model="state.form.userid" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="save">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup>
import request from "../../request.js";
import {onMounted, reactive} from "vue";
import {Delete} from '@element-plus/icons-vue'
import {ElMessage, ElNotification} from "element-plus";
const dialogFormVisible = false;
onMounted(() => {
  window.onbeforeunload = function (e) {
    let storage = window.localStorage;
    storage.clear();
  };
})


const state = reactive({
  tableData:[],
  form:{},
  multipleSelection: [],
  totalPrice:0
})
const userid = localStorage.getItem('userid')
const load = () => {
  // console.log(userid+"222")
  request.get("/cart/personalCart?userid=" + userid).then(res => {
    console.log(res)
    state.tableData = res.data.list
  })
}
load()
const handleSelectionChange = (val) => {
  console.log(val)
  state.multipleSelection = val
  request.post("/cart/cal", val).then(res => {
    state.totalPrice = res.data
  })
}

const handleDelete = (id) => {
  request.delete("/cart/" + id).then(res => {
    if(res.code==='200'&&res.data) {
      ElNotification.success("删除成功")
    }else{
      ElNotification.error("删除失败")
    }
    load()
  })
}
const adaOrder = () => {
  // console.log(state.multipleSelection)
  if (!state.multipleSelection.length) {
    ElNotification.error("下单失败，未选择商品")
    return
  }
  request.post("/order/addOrder", state.multipleSelection).then(res => {
    console.log(state.multipleSelection)
    if (res.code === '200') {
      ElNotification.success("下单成功")
      // console.log(res.data)
      load()
    } else {
      ElNotification.error(res.msg)
    }
  })
}
</script>

<style scoped>

</style>